<!--
 * new page
 * @author: xuaolei
 * @since: 2022-08-24
 * search.vue
-->
<script setup lang="ts">
import { cloudsearch } from "@/api/search";
import { onBeforeRouteUpdate } from "vue-router";
import { formatSongTime, formatMsgTime } from "@/utils/utils";

const route = useRoute();
const router = useRouter();
const info = reactive({
  keyVal: route.query.key,
  type: route.query.type || "1", //  搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
  typeList: [
    { k: 1, v: "单曲", t: "首单曲" },
    { k: 10, v: "专辑", t: "张专辑" },
    { k: 100, v: "歌手", t: "个歌手" },
    { k: 1000, v: "歌单", t: "个歌单" },
    // {k: 1002, v: '用户', t: '个用户'},
    { k: 1004, v: "MV", t: "个MV" },
    // {k: 1014, v: '视频', t: '个视频'},
    // {k: 1018, v: '综合', t: '个'}
  ],
  index: 0,
  total: 0,
  offset: 0,
  limit: 24,
  list: [],
  currentpage: 0,
  loading: false,
  listType: {
    songs: "单曲",
    artists: "歌手",
    albums: "专辑",
    playlists: "歌单",
  },
  suggestInfo: [],
});

function paneChange(params: any) {
  info["type"] = info.typeList[info.index].k.toString();
  info["total"] = 0;
  info["offset"] = 0;
  info["currentpage"] = 1;
  router.push({
    path: "/search",
    query: { key: info.keyVal, type: info.type },
  });
}

// 分页切换当前页
const currentChange = (page: number) => {
  info.offset = (page - 1) * info.limit;
  info.currentpage = page;
  getSerachMatch();
};

// 获取搜索结果
const getSerachMatch = async () => {
  info["loading"] = true;
  await cloudsearch({
    keywords: info.keyVal?.toString(),
    type: info.type.toString(),
    limit: info.limit,
    offset: info.offset,
  }).then((res: any) => {
    if (info.type === "1") {
      info["list"] =
        res.result.songs &&
        res.result.songs.map((item: any) => {
          return {
            id: String(item.id),
            name: item.name,
            mvId: item.mv,
            singer: item.ar,
            album: item.al,
            alia: item.alia,
            vip: item.fee === 1,
            license: item.license,
            duration: formatSongTime(item.dt),
            url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
            publishTime: formatMsgTime(item.publishTime),
          };
        });
      info.total = res.result.songCount || 0;
    } else if (info.type === "10") {
      info.list = res.result.albums || [];
      info.total = res.result.albumCount || 0;
    } else if (info.type === "100") {
      info.list = res.result.artists || [];
      info.total = res.result.artistCount || 0;
    } else if (info.type === "1000") {
      info.list = res.result.playlists || [];
      info.total = res.result.playlistCount || 0;
    } else if (info.type === "1004") {
      info.list = res.result.mvs || [];
      info.total = res.result.mvCount || 0;
    } else if (info.type === "1014") {
      info.list = res.result.videos || [];
      info.total = res.result.videoCount || 0;
    }
    info.loading = false;
  });
};

const init = () => {
  info["total"] = 0;
  info["list"] = [];
  getSerachMatch();
};

onMounted(() => {
  info["index"] = info.typeList.findIndex(
    (item: any) => item.k == info["type"]
  );
  init();
});

onBeforeRouteUpdate((to) => {
  info["keyVal"] = to.query.key;
  info["type"] = to.query.type || "1";
  info["index"] = info.typeList.findIndex(
    (item: any) => item.k == info["type"]
  );
  init();
});
</script>

<template>
  <div class="container">
    <h2>{{ route.query.key }}</h2>
    <div class="title">
      <h3>搜索结果</h3>
      <span> ( {{ info.total }}{{ info.typeList[info.index]["t"] }} ) </span>
    </div>
    <el-tabs v-model="info.index" tab-position="right" @tab-change="paneChange">
      <el-tab-pane
        :label="item.v"
        v-for="(item, key) in info.typeList"
        :name="key"
      >
        <div style="height: 400px" v-if="info.loading">
          <Loading></Loading>
        </div>
        <template v-else-if="info.type === '1' && !info.loading">
          <song-list
            :songList="info.list"
            :offset="info.offset"
            :pageSize="info.limit"
          ></song-list>
        </template>
        <template v-else-if="info.type === '10'">
          <album-list
            class="albums"
            :albumList="info.list"
            :loading="info.loading"
            :num="info.limit"
          ></album-list>
        </template>
        <template v-else-if="info.type === '100'">
          <search-artist
            :list="info.list"
            :loading="info.loading"
          ></search-artist>
        </template>

        <div class="pagination" v-show="info.total > info.limit">
          <el-pagination
            @current-change="currentChange"
            :current-page="info.currentpage"
            :page-size="info.limit"
            layout="prev, pager, next"
            :total="info.total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.container {
  h2 {
    font-size: 25px;
  }
  .title {
    display: flex;
    align-items: center;
    margin: 30px 0px 20px 0px;
    span {
      margin-left: 10px;
      font-size: var(--el-font-size-small);
    }
  }
}
</style>
